<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化大屏</title>
    <style>
      body {
        margin: 0;
        background-color: #000;
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 200px;
        /* perspective: 1000px;
        perspective-origin: 70% 10%; */
      }
      .chart.c1 {
        /* transform: translate(-80%, -80%) rotateX(90deg); */
        z-index: 3;
        /* border: 8px dashed white; */
        left: 500px;
        top: 100px;
      }
      .chart.c2 {
        /* transform: translate(-50%, -50%) rotateX(90deg); */
        /* transform: translate(-50%, -50%); */
        /* box-shadow: 0 0 5px white; */
        z-index: 4;
        left: 700px;
        top: 200px;
      }
      .chart.c3 {
        /* transform: translate(-20%, -20%) rotateX(90deg); */
        /* box-shadow: 0 0 5px white; */
        z-index: 1;
        left: 600px;
        top: 300px;
      }
      .center {
        /* position: absolute; */
        /* top: 50%;
        left: 50%; */
      }
      .chart {
        border-radius: 4px;
        border: 5px solid #0074ff;
        height: calc(250px * 0.618);
        width: 250px;
        /* box-shadow: 0 0 20px white; */
        background-color: #000;
        position: absolute;
        /* margin: 8px; */

      }
      .a1 {
        transform: translate(-160%, 15%) scale(.5) scaleY(.5);
      }
      .a2 {
        transform: translate(-160%, 5%) scale(.5) scaleY(.5);
        opacity: .6;
      }
      .a3 {
        transform: translate(-160%, -5%) scale(.5) scaleY(.5);
        opacity: .3;
      }
      .a4 {
        transform: translate(90%, -55%) rotate(180deg) scale(.5) scaleY(.5);
        opacity: .3;
      }
      .a5 {
        transform: translate(90%, -65%) rotate(180deg) scale(.5) scaleY(.5);
        opacity: .6;
      }
      .a6 {
        transform: translate(90%, -75%) rotate(180deg) scale(.5) scaleY(.5);
      }

      .box {
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: white;
        z-index: 999;
      }
      .box.t {
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
      }
      .box.rt {
        top: -12px;
        right: -12px;
        /* transform: translateX(-50%); */
      }
      .box.r {
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
      }
      .box.rb {
        bottom: -12px;
        right: -12px;
        /* transform: translateX(-50%); */
      }
      .box.b {
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
      }
      .box.lb {
        bottom: -12px;
        left: -12px;
        /* transform: translateX(-50%); */
      }
      .box.l {
        top: 50%;
        left: -12px;
        transform: translateY(-50%);
      }
      .box.lt {
        top: -12px;
        left: -12px;
        /* transform: translateX(-50%); */
      }
      .content {
        width: 100%;
        height: 100%;
      }
      .chart>div {
        position: absolute!important;
      }
      .wrapper {
        position: absolute;
        width: 550px;
        height: 450px;
        left: 450px;
        top: 50px;
        border: 3px solid #fff;
        border-radius: 10px;
      }
    </style>
</head>
<body>

  <div class="wrapper"></div>

    <div class="chart center c1"></div>
    <div class="chart center c2">
      <div class="content">
        <div class="box t"></div>
        <div class="box rt"></div>
        <div class="box r"></div>
        <div class="box rb"></div>
        <div class="box b"></div>
        <div class="box lb"></div>
        <div class="box l"></div>
        <div class="box lt"></div>
      </div>
    </div>
    <div class="chart center c3"></div>

    <!-- <svg class="arrow center a1" t="1650528097956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3208" width="200" height="200"><path d="M1014.840889 250.538667a28.416 28.416 0 0 0-40.220445 0L512 713.102222 49.379556 250.538667a28.416 28.416 0 1 0-40.220445 40.220444l482.702222 482.730667a28.444444 28.444444 0 0 0 40.248889 0l482.702222-482.759111a28.416 28.416 0 0 0 0.028445-40.192z" p-id="3209" fill="#0074FF"></path></svg>
    <svg class="arrow center a2" t="1650528097956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3208" width="200" height="200"><path d="M1014.840889 250.538667a28.416 28.416 0 0 0-40.220445 0L512 713.102222 49.379556 250.538667a28.416 28.416 0 1 0-40.220445 40.220444l482.702222 482.730667a28.444444 28.444444 0 0 0 40.248889 0l482.702222-482.759111a28.416 28.416 0 0 0 0.028445-40.192z" p-id="3209" fill="#0074FF"></path></svg>
    <svg class="arrow center a3" t="1650528097956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3208" width="200" height="200"><path d="M1014.840889 250.538667a28.416 28.416 0 0 0-40.220445 0L512 713.102222 49.379556 250.538667a28.416 28.416 0 1 0-40.220445 40.220444l482.702222 482.730667a28.444444 28.444444 0 0 0 40.248889 0l482.702222-482.759111a28.416 28.416 0 0 0 0.028445-40.192z" p-id="3209" fill="#0074FF"></path></svg>

    <svg class="arrow center a4" t="1650528097956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3208" width="200" height="200"><path d="M1014.840889 250.538667a28.416 28.416 0 0 0-40.220445 0L512 713.102222 49.379556 250.538667a28.416 28.416 0 1 0-40.220445 40.220444l482.702222 482.730667a28.444444 28.444444 0 0 0 40.248889 0l482.702222-482.759111a28.416 28.416 0 0 0 0.028445-40.192z" p-id="3209" fill="#0074FF"></path></svg>
    <svg class="arrow center a5" t="1650528097956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3208" width="200" height="200"><path d="M1014.840889 250.538667a28.416 28.416 0 0 0-40.220445 0L512 713.102222 49.379556 250.538667a28.416 28.416 0 1 0-40.220445 40.220444l482.702222 482.730667a28.444444 28.444444 0 0 0 40.248889 0l482.702222-482.759111a28.416 28.416 0 0 0 0.028445-40.192z" p-id="3209" fill="#0074FF"></path></svg>
    <svg class="arrow center a6" t="1650528097956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3208" width="200" height="200"><path d="M1014.840889 250.538667a28.416 28.416 0 0 0-40.220445 0L512 713.102222 49.379556 250.538667a28.416 28.416 0 1 0-40.220445 40.220444l482.702222 482.730667a28.444444 28.444444 0 0 0 40.248889 0l482.702222-482.759111a28.416 28.416 0 0 0 0.028445-40.192z" p-id="3209" fill="#0074FF"></path></svg> -->

    <!-- 引入库 -->
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jq.js"></script>
    <!-- moment.js -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

    <!-- 引入数据 -->
    <script src="./mock/data.js"></script>

    <script>

      const c1 = echarts.init(document.querySelector('.c1'));
      const c2 = echarts.init(document.querySelector('.c2'));
      const c3= echarts.init(document.querySelector('.c3'));

      function resizer (selector) {
        const content = document.createElement('div');
        content.className = 'content';
        content.innerHTML = `
          <div class="box t"></div>
          <div class="box rt"></div>
          <div class="box r"></div>
          <div class="box rb"></div>
          <div class="box b"></div>
          <div class="box lb"></div>
          <div class="box l"></div>
          <div class="box lt"></div>
        `;
        document.querySelector(selector).appendChild(content);
      }

      resizer('.c1');
      resizer('.c2');
      resizer('.c3');

      c1.setOption({
        grid: {
          bottom: 20,
          top: 20,
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        series: [
          {
            data: [0, 22, 50, 35, 0],
            type: 'line',
            // smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#0074FF' // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
            },
          }
        ]
      });

      c2.setOption({
        grid: {
          bottom: 20,
          top: 20,
        },
        xAxis: {
          show: false,
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(255, 255, 255, 0.08)'
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#FFE94D98' // 0% 处的颜色
                },{
                    offset: .5, color: '#FFE94D98' // 0% 处的颜色
                }, {
                    // offset: 1, color: '#FFB038E3' // 100% 处的颜色
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
            }
          }
        ]
      });

      c3.setOption({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 848, name: 'Search Engine', itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                color: '#592FF5',
                borderRadius: 6,
              } },
              { value: 735, name: 'Search Engine', itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                color: '#8033EE',
                borderRadius: 6,
              } },
              { value: 530, name: 'Search Engine', itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'white',
                color: '#E54C9E',
                selected: true,
                borderRadius: 6,
              } },
            ],
          }
        ]
      });

      function addRowmin (idx) {
        this.batchOrder[idx].foods.push({
          billFoodId: null,
          count: null,
        });
      }

    </script>

</body>
</html>